<template>
    <div class="container">
        <div class="login">
            <h2>登陆\注册</h2>
            <el-form
                label-position="top"
                ref="ruleFormRef"
                label-width="100px"
                :rules="rules"
                :model="data"
                style="max-width: 460px; margin-left: 10%;"
                class="login_form"
                scroll-to-error="true"
                size="large"
            >
                <el-form-item class="label" label="用户名：" prop="username">
                    <el-input v-model="data.username" />
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="data.email"/>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                <el-input v-model="data.phone"/>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                <el-input v-model="data.password"/>
                </el-form-item>
                <el-form-item label="确认密码：" prop="password2">
                <el-input v-model="data.password2" />
                </el-form-item>
            </el-form>
            <div class="btn">
                <button class="login_btn" @click="longin(ruleFormRef)">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import {ref, reactive} from "vue"
import { useRouter } from "vue-router";
import {adminRegisterApi} from "../composables/http"
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const validatePhone = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入电话号'))
  } else {
    if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        callback(new Error('Please 正确的 phone'))
    }
    callback()
  }
}
const validatePassword2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入确认密码'))
  } else {
    if (!(data.password2 == data.password) ) {
        callback(new Error('两次密码不一致'))
    }
    callback()
  }
}
const rules = reactive<FormRules<typeof data>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 11, message: 'Length should be 3 to 8', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { min: 5, max: 35, message: 'Length should be 5 to 35', trigger: 'blur' },
    ],
    phone: [{ validator: validatePhone, trigger: 'blur' }],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 1, max: 20, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password2: [{ validator: validatePassword2, trigger: 'blur' }],
})
const data = reactive<API.adminRegisterData>({
    username: '',
    email: '',
    phone: '',
    password: '',
    password2: '',
})

const longin = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if (valid) {
      const d = await adminRegisterApi(data)
      if(d.code == 200){
        router.push("/login")
      }
    } else {
      console.log('验证失败!')
      return false
    }
  })
}
</script>

<style scoped lang="scss">
    .container {
        padding: 0;
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        background-image: linear-gradient(#a18cd1 0%, #fbc2eb 100%);
        background-size: cover;
        flex: 1;
        align-items: center;
    }
    .login{
        position: relative;
        text-align: center;
        margin: 0 auto;
        width: 600px;
        height: 720px;
        background-color: rgba(87, 86, 86, 0.2);
        border-radius: 25px;
        box-shadow: 5px 2px 35px -7px #ff9a9e;
    }
    .login h2{
        margin-top: 40px;
        color: aliceblue;
        font-weight: 100;
        font-size: .3rem;
    }
    .login_form{
        padding: 20px;
    }
    // ::v-deep  .el-form-item__label{
    //     width: fit-content!important; // 元素自适应内容宽度
    //     color: rgb(131, 220, 255);
    //     font-size: 18px;
    //     font-weight: 100;
    // }
    .login_form input{
        background-color: transparent;
        width: 320px;
        padding: 2px;
        text-indent: 2px;
        color: white;
        font-size: 20px;
        height: 45px;
        margin: 30px 30px 30px 5px;
        outline: none;
        border: 0;
        border-bottom: 1px solid rgb(131, 220, 255);
    }
    // ::v-deep .el-input__wrapper{
    //     background-color: transparent;
    //     width: 320px;
    //     padding: 2px;
    //     text-indent: 2px;
    //     color: white;
    //     font-size: 20px;
    //     height: 45px;
    //     // margin: 30px 30px 30px 5px;
    //     border: 0px solid red;
    //     outline: none;
    //     border: 0;
    //     box-shadow:none;
    //     border-bottom: 1px solid rgb(131, 220, 255);
    // }
    // ::v-deep .el-input{
    //     border: 0;
    // }
    input::placeholder{
        color: #fbc2eb;
        font-weight: 100;
        font-size: 18px;
        font-style: italic;
    }
    .btn{
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
    }
    .login_btn{
        background-color: rgba(255, 255, 255, 0.582);
        border: 1px solid rgb(190, 225, 255);
        padding: 10px;
        width: 240px;
        height: 60px;
        border-radius: 30px;
        font-size: 30px;
        color: rgb(100, 183, 255);
        font-weight: 100;       
        margin-top: 15px;
    }
    .login_btn:hover{
        box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
        background-color: transparent;
        color: white;
        /* 选择动画 */
        animation: login_mation 0.5s;
    }

    /* 定义动画 */
    @keyframes login_mation
    {
        from {
            background-color: rgba(255, 255, 255, 0.582);
            box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);
        }
        to {
            background-color: transparent;
            color: white;
            box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
        }
    }
</style>